<template>

  <div class="exam-detail">

    <div class="inner">

      <div class="title">
        <span>{{examData.examName}}(满分：{{examData.examTotal}})</span>
      </div>

      <!--=================================单选题 开始=================================== -->
      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            单选题
            <el-button type="primary" size="mini" style="float: right"
                       :disabled="examData.examStatus === 'closed'" @click="oneSelectAdd">
              新增单选题</el-button>
          </div>
          <div class="item" v-for="(i, index) in examData.oneSelects" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18" >{{ i.title }}</div>
              <div  style="text-align: center">
                {{i.grade}} 分
                <el-button type="success" size="mini" :disabled="examData.examStatus === 'closed'"
                           @click="oneSelectUpd(i.examOneSelectId)">更新</el-button>
                <el-button type="danger" size="mini" :disabled="examData.examStatus === 'closed'"
                           @click="oneSelectDelete(i.examOneSelectId)">删除</el-button>
              </div>
            </div>
              <el-radio-group
                v-model="choiseList[index]"
                class="option">
                <!--@change="test(choiseList[index])"-->

                <el-radio
                  :label="options"
                  v-for="(options, indx) in i.list"
                  v-bind:key="indx"
                >{{ options.optionDef + "、" + options.optionText }}
                </el-radio>

              </el-radio-group>
          </div>
        </div>
      </div>

      <el-dialog title="新增单选题" :visible.sync="dialogOneSelectAddVisible" :close-on-click-modal="false" width="1200px">
        <el-form :inline="true" class="demo-form-inline" label-width="100px">
        <!--单选题-->
        <el-row class="objhead"><span>单选题</span></el-row>
          <el-row>
            <el-form-item label="单选题">
              <el-select v-model="searchAddObj.oneSelects" multiple  placeholder='请选择' style="width: 1000px">
                <el-option
                  v-for="item in oneSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="单选题每道题分数: " label-width="200px">
              <el-input v-model="searchAddObj.oneSelectGrade" type="number" placeholder="分数" ></el-input>
            </el-form-item>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="oneSelectSave">保 存</el-button>
          <el-button @click="dialogOneSelectAddVisible = false">取 消</el-button>
        </div>

      </el-dialog>


      <el-dialog title="更新单选题分数" :visible.sync="dialogOneSelectUpdVisible" :close-on-click-modal="false" width="1200px">
        <el-form :inline="true" class="demo-form-inline" label-width="100px">
          <!--单选题-->
          <el-row class="objhead"><span>单选题</span></el-row>

          <el-row>
            <el-form-item label="分数: " label-width="200px">
              <el-input v-model="searchUpdObj.oneSelectGrade" type="number" placeholder="分数" ></el-input>
            </el-form-item>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="oneSelectUpdate">保 存</el-button>
          <el-button @click="dialogOneSelectUpdVisible = false">取 消</el-button>
        </div>

      </el-dialog>


      <!--=================================单选题 结束=================================== -->


      <!--=================================多选题 开始=================================== -->
      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            多选题
            <el-button type="primary" size="mini" style="float: right" :disabled="examData.examStatus === 'closed'"
                       @click="manySelectAdd">新增多选题</el-button>
          </div>
          <div class="item" v-for="(i, index) in examData.manySelects" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18">{{ i.title }}</div>
              <div  style="text-align: center">
                {{i.grade}} 分
                <el-button type="success" size="mini" :disabled="examData.examStatus === 'closed'"
                           @click="manySelectUpd(i.examManySelectId)">更新</el-button>
                <el-button type="danger" size="mini" :disabled="examData.examStatus === 'closed'"
                           @click="manySelectDelete(i.examManySelectId)">删除</el-button>
              </div>
            </div>
            <!--<div style="height: 20px; margin-bottom: 20px"><span style="margin-bottom: 20px"></span></div>-->
            <el-checkbox-group
              v-model="choiseManyList"
              class="option"
            >
              <el-checkbox
                :label="options"
                v-for="(options, indx) in i.list"
                v-bind:key="indx"
              >{{ options.optionDef + "、" + options.optionText }}
              </el-checkbox>

              </el-checkbox-group>
          </div>
        </div>
      </div>

      <el-dialog title="新增多选题" :visible.sync="dialogManySelectAddVisible" :close-on-click-modal="false" width="1200px">
        <el-form :inline="true" class="demo-form-inline" label-width="100px">

          <el-row class="objhead"><span>多选题</span></el-row>
          <el-row>
            <el-form-item label="多选题">
              <el-select v-model="searchAddObj.manySelects" multiple  placeholder='请选择' style="width: 1000px">
                <el-option
                  v-for="item in manySelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="多选题每道题分数: " label-width="200px">
              <el-input v-model="searchAddObj.manySelectGrade" type="number" placeholder="分数" ></el-input>
            </el-form-item>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="manySelectSave">保 存</el-button>
          <el-button @click="dialogManySelectAddVisible = false">取 消</el-button>
        </div>

      </el-dialog>

      <el-dialog title="更新多选题分数" :visible.sync="dialogManySelectUpdVisible" :close-on-click-modal="false" width="1200px">
        <el-form :inline="true" class="demo-form-inline" label-width="100px">
          <el-row class="objhead"><span>多选题</span></el-row>

          <el-row>
            <el-form-item label="分数: " label-width="200px">
              <el-input v-model="searchUpdObj.manySelectGrade" type="number" placeholder="分数" ></el-input>
            </el-form-item>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="manySelectUpdate">保 存</el-button>
          <el-button @click="dialogManySelectUpdVisible = false">取 消</el-button>
        </div>

      </el-dialog>

      <!--=================================多选题 结束=================================== -->

      <!--=================================判断题 开始=================================== -->
      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            判断题
            <el-button type="primary" size="mini" style="float: right" :disabled="examData.examStatus === 'closed'"
                       @click="judgeAdd">新增判断题</el-button>
          </div>
          <div class="item" v-for="(i, index) in examData.judges" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18">{{ i.title }}</div>
              <div style="text-align: center">
                {{i.grade}} 分
                <el-button type="success" size="mini" :disabled="examData.examStatus === 'closed'"
                           @click="judgeUpd(i.examJudgeId)">更新</el-button>
                <el-button  type="danger" size="mini" :disabled="examData.examStatus === 'closed'"
                            @click="judgeDelete(i.examJudgeId)">删除</el-button>
              </div>
            </div>
            <!--<div style="height: 20px; margin-bottom: 20px"><span style="margin-bottom: 20px"></span></div>-->
            <el-radio-group
              v-model="choiseJudgeList"
              class="option"
            >
              <el-radio
                :label="options"
                v-for="(options, indx) in i.list"
                v-bind:key="indx"
              >{{ options.optionDef + "、" + options.optionText }}
              </el-radio>

            </el-radio-group>
          </div>
        </div>

        <el-dialog title="新增判断题" :visible.sync="dialogJudgeAddVisible" :close-on-click-modal="false" width="1200px">
          <el-form :inline="true" class="demo-form-inline" label-width="100px">

            <el-row class="objhead"><span>判断题</span></el-row>
            <el-row>
              <el-form-item label="判断题">
                <el-select v-model="searchAddObj.judges" multiple  placeholder='请选择' style="width: 1000px">
                  <el-option
                    v-for="item in judgeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item label="判断题每道题分数: " label-width="200px">
                <el-input v-model="searchAddObj.judgeGrade" type="number" placeholder="分数" ></el-input>
              </el-form-item>
            </el-row>

          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button type="success" @click="judgeSave">保 存</el-button>
            <el-button @click="dialogJudgeAddVisible = false">取 消</el-button>
          </div>

        </el-dialog>

      </div>

      <el-dialog title="更新判断题分数" :visible.sync="dialogJudgeUpdVisible" :close-on-click-modal="false" width="1200px">
        <el-form :inline="true" class="demo-form-inline" label-width="100px">
          <el-row class="objhead"><span>判断题</span></el-row>

          <el-row>
            <el-form-item label="分数: " label-width="200px">
              <el-input v-model="searchUpdObj.judgeGrade" type="number" placeholder="分数" ></el-input>
            </el-form-item>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="judgeUpdate">保 存</el-button>
          <el-button @click="dialogJudgeUpdVisible = false">取 消</el-button>
        </div>

      </el-dialog>



      <!--=================================判断题 结束=================================== -->

      <!--=================================填空题 开始=================================== -->

      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            填空题
            <el-button type="primary" size="mini" style="float: right" :disabled="examData.examStatus === 'closed'"
                       @click="completionAdd">新增填空题</el-button>
          </div>
          <div class="item" v-for="(i, index) in examData.completions" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18">{{ i.title }}</div>
              <div style="text-align: center">
                {{i.grade}} 分
                <el-button type="success" size="mini" :disabled="examData.examStatus === 'closed'"
                           @click="completionUpd(i.examCompletionId)">更新</el-button>
                <el-button type="danger" size="mini" :disabled="examData.examStatus === 'closed'"
                           @click="completionDelete(i.examCompletionId)">删除</el-button>
              </div>
            </div>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="i.context" style="margin-top: 20px">
            </el-input>
          </div>
        </div>

      </div>

      <el-dialog title="新增填空题" :visible.sync="dialogCompletionAddVisible" :close-on-click-modal="false" width="1200px">
        <el-form :inline="true" class="demo-form-inline" label-width="100px">

          <el-row class="objhead"><span>填空题</span></el-row>
          <el-row>
            <el-form-item label="填空题">
              <el-select v-model="searchAddObj.completions" multiple  placeholder='请选择' style="width: 1000px">
                <el-option
                  v-for="item in completionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="填空题每道题分数: " label-width="200px">
              <el-input v-model="searchAddObj.completionGrade" type="number" placeholder="分数" ></el-input>
            </el-form-item>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="completionSave">保 存</el-button>
          <el-button @click="dialogCompletionAddVisible = false">取 消</el-button>
        </div>

      </el-dialog>

      <el-dialog title="更新填空题分数" :visible.sync="dialogCompletionUpdVisible" :close-on-click-modal="false" width="1200px">
        <el-form :inline="true" class="demo-form-inline" label-width="100px">
          <el-row class="objhead"><span>填空题</span></el-row>

          <el-row>
            <el-form-item label="分数: " label-width="200px">
              <el-input v-model="searchUpdObj.completionGrade" type="number" placeholder="分数" ></el-input>
            </el-form-item>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="completionUpdate">保 存</el-button>
          <el-button @click="dialogCompletionUpdVisible = false">取 消</el-button>
        </div>

      </el-dialog>

      <!--=================================填空题 结束=================================== -->

      <!--=================================简答题 开始=================================== -->

      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            简答题
            <el-button type="primary" size="mini" style="float: right" :disabled="examData.examStatus === 'closed'"
                       @click="shortAnswerAdd">新增简答题</el-button>
          </div>
          <div class="item" v-for="(i, index) in examData.shortAnswers" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18">{{ i.title }}</div>
              <div  style="text-align: center">
                {{i.grade}} 分
                <el-button type="success" size="mini" :disabled="examData.examStatus === 'closed'"
                           @click="shortAnswerUpd(i.exameShortAnswerId)">更新</el-button>
                <el-button type="danger" size="mini" :disabled="examData.examStatus === 'closed'"
                           @click="shortAnswerDelete(i.exameShortAnswerId)">删除</el-button>
              </div>
            </div>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="i.context" style="margin-top: 20px">
            </el-input>
          </div>
        </div>

      </div>

      <el-dialog title="新增简答题" :visible.sync="dialogShortAnswerAddVisible" :close-on-click-modal="false" width="1200px">
        <el-form :inline="true" class="demo-form-inline" label-width="100px">

          <el-row class="objhead"><span>简答题</span></el-row>
          <el-row>
            <el-form-item label="简答题">
              <el-select v-model="searchAddObj.shortAnswers" multiple  placeholder='请选择' style="width: 1000px">
                <el-option
                  v-for="item in shortAnswerList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="简答题每道题分数: " label-width="200px">
              <el-input v-model="searchAddObj.shortAnswerGrade" type="number" placeholder="分数" ></el-input>
            </el-form-item>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="shortAnswerSave">保 存</el-button>
          <el-button @click="dialogShortAnswerAddVisible = false">取 消</el-button>
        </div>

      </el-dialog>

      <el-dialog title="更新简答题分数" :visible.sync="dialogShortAnswerUpdVisible" :close-on-click-modal="false" width="1200px">
        <el-form :inline="true" class="demo-form-inline" label-width="100px">
          <el-row class="objhead"><span>简答题</span></el-row>

          <el-row>
            <el-form-item label="分数: " label-width="200px">
              <el-input v-model="searchUpdObj.shortAnswerGrade" type="number" placeholder="分数" ></el-input>
            </el-form-item>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="shortAnswerUpdate">保 存</el-button>
          <el-button @click="dialogShortAnswerUpdVisible = false">取 消</el-button>
        </div>

      </el-dialog>


      <!--=================================简答题 结束=================================== -->

      <div>
        <el-button type="primary" @click="pr"> 打印 </el-button>
      </div>

    </div>

  </div>

</template>

<script>

  import * as examService from '@/api/exam';
  import * as selectService from '@/api/select';
  import * as examSubjectService from '@/api/examSubject';

  export default {
    data() {
      return {
        id: this.$route.query.id,

        btnDisableFlag: false,

        searchAddObj: {},

        searchUpdObj: {},

        // add dialog
        dialogOneSelectAddVisible: false,
        dialogManySelectAddVisible: false,
        dialogJudgeAddVisible: false,
        dialogCompletionAddVisible: false,
        dialogShortAnswerAddVisible: false,

        // update dialog
        dialogOneSelectUpdVisible: false,
        dialogManySelectUpdVisible: false,
        dialogJudgeUpdVisible: false,
        dialogCompletionUpdVisible: false,
        dialogShortAnswerUpdVisible: false,

        // data
        examData: {
          oneSelects: {
          },
        },

        // 选择的数据
        choiseList: [],
        choiseManyList: [],
        choiseJudgeList: [],
        choiseCompletionList: [],
        choiseshortAnswerList: [],


        // 题型下拉
        oneSelectList: [],
        manySelectList: [],
        judgeList: [],
        completionList: [],
        shortAnswerList: [],
      };
    },

    created(){
      this.getListById();
    },

    mounted() {

    },

    methods: {
      pr(){
        console.log(JSON.stringify(this.choiseList));
        console.log(JSON.stringify(this.choiseManyList));
      },

      getListById(){
        examService.detailExam(this.id).then(res =>{
          debugger;
          this.examData = res.data;
        });
      },



      // 新增
      oneSelectAdd(){
        this.searchAddObj = {}; // 清空上次所选

        this.subjectListForAdd(); // 下拉数据
        this.dialogOneSelectAddVisible=true;
      },

      oneSelectSave(){
        const query = {};
        query.examId = this.examData.id;
        query.list = this.searchAddObj.oneSelects;
        query.grade = this.searchAddObj.oneSelectGrade;

        examSubjectService.addExamOneSelect(query).then(res =>{
          this.getListById();
          this.dialogOneSelectAddVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '保存成功!'
          });

        });
      },

      manySelectAdd(){
        this.searchAddObj = {}; // 清空上次所选

        this.subjectListForAdd(); // 下拉数据
        this.dialogManySelectAddVisible=true;
      },

      manySelectSave(){
        const query = {};
        query.examId = this.examData.id;
        query.list = this.searchAddObj.manySelects;
        query.grade = this.searchAddObj.manySelectGrade;

        examSubjectService.addExamManySelect(query).then(res =>{
          this.getListById();
          this.dialogManySelectAddVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '保存成功!'
          });

        });
      },


      judgeAdd(){
        this.searchAddObj = {}; // 清空上次所选

        this.subjectListForAdd(); // 下拉数据
        this.dialogJudgeAddVisible=true;
      },

      judgeSave(){
        const query = {};
        query.examId = this.examData.id;
        query.list = this.searchAddObj.judges;
        query.grade = this.searchAddObj.judgeGrade;

        examSubjectService.addExamJudge(query).then(res =>{
          this.getListById();
          this.dialogJudgeAddVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '保存成功!'
          });

        });
      },

      completionAdd(){
        this.searchAddObj = {}; // 清空上次所选

        this.subjectListForAdd(); // 下拉数据
        this.dialogCompletionAddVisible=true;
      },

      completionSave(){
        const query = {};
        query.examId = this.examData.id;
        query.list = this.searchAddObj.completions;
        query.grade = this.searchAddObj.completionGrade;

        examSubjectService.addExamCompletion(query).then(res =>{
          this.getListById();
          this.dialogCompletionAddVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '保存成功!'
          });

        });
      },


      shortAnswerAdd(){
        this.searchAddObj = {}; // 清空上次所选

        this.subjectListForAdd(); // 下拉数据
        this.dialogShortAnswerAddVisible=true;
      },

      shortAnswerSave(){
        const query = {};
        query.examId = this.examData.id;
        query.list = this.searchAddObj.shortAnswers;
        query.grade = this.searchAddObj.shortAnswerGrade;

        examSubjectService.addExamShortAnswer(query).then(res =>{
          this.getListById();
          this.dialogShortAnswerAddVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '保存成功!'
          });

        });
      },


      // 更新
      oneSelectUpd(id){
        this.searchUpdObj = {}; // 清空上次所选
        this.searchUpdObj.id = id;
        this.dialogOneSelectUpdVisible=true;
      },

      oneSelectUpdate(){
        if (!this.searchUpdObj.oneSelectGrade){
          alert("分数必填！");
        }
        const query = {};
        query.ceeExamId = this.examData.id;
        query.id = this.searchUpdObj.id;
        query.grade = this.searchUpdObj.oneSelectGrade;

        examSubjectService.updateExamOneSelect(query).then(res =>{
          this.getListById();
          this.dialogOneSelectUpdVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '更新成功!'
          });

        });
      },

      manySelectUpd(id){
        this.searchUpdObj = {}; // 清空上次所选
        this.searchUpdObj.id = id;
        this.dialogManySelectUpdVisible=true;
      },

      manySelectUpdate(){
        if (!this.searchUpdObj.manySelectGrade){
          alert("分数必填！");
        }
        const query = {};
        query.ceeExamId = this.examData.id;
        query.id = this.searchUpdObj.id;
        query.grade = this.searchUpdObj.manySelectGrade;

        examSubjectService.updateExamManySelect(query).then(res =>{
          this.getListById();
          this.dialogManySelectUpdVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '更新成功!'
          });
        });
      },

      judgeUpd(id){
        this.searchUpdObj = {}; // 清空上次所选
        this.searchUpdObj.id = id;
        this.dialogJudgeUpdVisible=true;
      },

      judgeUpdate(){
        if (!this.searchUpdObj.judgeGrade){
          alert("分数必填！");
        }
        const query = {};
        query.ceeExamId = this.examData.id;
        query.id = this.searchUpdObj.id;
        query.grade = this.searchUpdObj.judgeGrade;

        examSubjectService.updateExamJudge(query).then(res =>{
          this.getListById();
          this.dialogJudgeUpdVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '更新成功!'
          });
        });
      },


      completionUpd(id){
        this.searchUpdObj = {}; // 清空上次所选
        this.searchUpdObj.id = id;
        this.dialogCompletionUpdVisible=true;
      },

      completionUpdate(){
        if (!this.searchUpdObj.completionGrade){
          alert("分数必填！");
        }
        const query = {};
        query.ceeExamId = this.examData.id;
        query.id = this.searchUpdObj.id;
        query.grade = this.searchUpdObj.completionGrade;

        examSubjectService.updateExamCompletion(query).then(res =>{
          this.getListById();
          this.dialogCompletionUpdVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '更新成功!'
          });
        });
      },

      shortAnswerUpd(id){
        this.searchUpdObj = {}; // 清空上次所选
        this.searchUpdObj.id = id;
        this.dialogShortAnswerUpdVisible=true;
      },

      shortAnswerUpdate(){
        if (!this.searchUpdObj.shortAnswerGrade){
          alert("分数必填！");
        }
        const query = {};
        query.ceeExamId = this.examData.id;
        query.id = this.searchUpdObj.id;
        query.grade = this.searchUpdObj.shortAnswerGrade;

        examSubjectService.updateExamShortAnswer(query).then(res =>{
          this.getListById();
          this.dialogShortAnswerUpdVisible=false;
          //提示
          this.$message({
            type: 'success',
            message: '更新成功!'
          });
        });
      },


      // 删除
      oneSelectDelete(id){
        this.$confirm('此操作将删除单选题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //确定执行then方法
          //调用接口
          examSubjectService.deleteExamOneSelect(id, this.examData.id).then(res =>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            this.getListById();
          });
        });
      },

      manySelectDelete(id){
        this.$confirm('此操作将删除多选题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //确定执行then方法
          //调用接口
          examSubjectService.deleteExamManySelect(id, this.examData.id).then(res =>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            this.getListById();
          });
        });
      },

      judgeDelete(id){
        this.$confirm('此操作将删除判断题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //确定执行then方法
          //调用接口
          examSubjectService.deleteExamJudge(id, this.examData.id).then(res =>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            this.getListById();
          });
        });
      },

      completionDelete(id){
        this.$confirm('此操作将删除判断题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //确定执行then方法
          //调用接口
          examSubjectService.deleteExamCompletion(id, this.examData.id).then(res =>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            this.getListById();
          });
        });
      },

      shortAnswerDelete(id){
        this.$confirm('此操作将删除判断题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //确定执行then方法
          //调用接口
          examSubjectService.deleteExamShortAnswer(id, this.examData.id).then(res =>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            this.getListById();
          });
        });
      },



      // 根据部门、岗位 查询 题目下拉数据
      subjectListForAdd(){

        debugger;

        if (this.examData.oneTypeId !=0 && this.examData.twoTypeId != 0){

          const query = {};
          query.oneTypeId = this.examData.oneTypeId;
          query.twoTypeId = this.examData.twoTypeId;

          // 单选题
          selectService.getOneSelectList(query).then(res =>{
            this.oneSelectList = res.data;
          });

          // 多选题
          selectService.getManySelectList(query).then(res =>{
            this.manySelectList = res.data;
          });

          // 判断题
          selectService.getJudgeList(query).then(res =>{
            this.judgeList = res.data;
          });

          // 填空题
          selectService.getCompletionList(query).then(res =>{
            this.completionList = res.data;
          });

          // 简答题
          selectService.getShortAnswerList(query).then(res =>{
            this.shortAnswerList = res.data;
          });
        }

      },
    }
  };

</script>

<style scoped lang="scss">
  .exam-detail {
    background: #fafafa;
    padding: 20px 0;
    box-sizing: border-box;
    .inner {
      width: 1100px;
      margin: 0 auto;

      .title {
        margin-left: 350px;
        margin-bottom: 40px;
        font-size: 24px;
        a {
          color: #333;
          margin-right: 5px;
        }
      }

      .cont {
        display: flex;
        justify-content: space-between;
        .cont-left {
          width: 1100px;
          background: #fff;
          /*min-height: 600px;*/

          .subhead {
            width: 100%;
            height: 47px;
            background: #effaff;
            line-height: 47px;
            color: #0076ff;
            padding-left: 26px;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: bold;
          }

          .item {
            padding: 15px 26px;
            box-sizing: border-box;

            .subject {
              margin-bottom: 20px;
            }

            .option {
              .el-radio {
                /*margin-top: 25px;*/
                margin-bottom: 12px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
              }

              .el-radio__input {
                display: block;
              }

              .el-radio__label {
                display: block;
                white-space: normal;
                width: 600px;
                line-height: 15px;
              }

              .el-checkbox {
                /*margin-top: 20px;*/
                margin-bottom: 15px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
              }

              .el-checkbox__input {
                /*margin-top: 20px;*/
                display: block;
              }

              .el-checkbox__label {
                margin-top: 20px;
                display: block;
                white-space: normal;
                width: 600px;
                line-height: 15px;
              }
            }
          }
        }
      }
    }
  }

  ul {
    width: 270px;
    // padding: 10px;
    // box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    background: red;
    li {
      width: 35px;
      height: 35px;
      border-radius: 6px;
      margin: 5px;
      &.green-bg {
        background: green;
      }

      &.red-bg {
        background: red;
      }

      &.gray-bg {
        background: gray;
      }
    }
  }

  .objhead {
    width: 100%;
    /*height: 47px;*/
    background: #effaff;
    line-height: 47px;
    color: #0076ff;
    /*padding-left: 26px;*/
    box-sizing: border-box;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom:1px solid #000;

  }


  ul li[data-v-5c2a0797] {
    width: 100%;
  }

  el-radio-group option {
    margin-top: 10px;
  }

</style>



